<template>
	<view class="pd-30 container" :style="{ height: isEmpty ? '100%' : 'unset' }">
		<u-navbar :border-bottom="false" :title="navTitle" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<!-- <my-scroll-view scroll-y refresher-enabled :init="init"> -->
		<my-switch-tab :actived-tab.sync="activedTab" :tabs="tabs"></my-switch-tab>
		<view class="list-container" :style="{ flex: isEmpty ? 1 : 'unset' }">
			<my-exam-list-item
				@click.native="viewResult({ upid: exam.upid,status:choseNow}, null, false)"
				:iconColor="activedTab == 1 ? false : true"
				@start-exam="startExam"
				v-for="exam in list"
				:key="exam.examid"
				:item="exam"
			></my-exam-list-item>
			<my-empty v-if="isEmpty"></my-empty>
		</view>
		<!-- </my-scroll-view> -->
		<u-loadmore v-if="isShowLoadMore" @loadmore="getList()" bg-color="#f5f5f5" :status="status" icon-type="flower" />
	</view>
</template>

<script>
//setting中数组的数据分别对应当前选中的tab下标
import exam from '../../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			activedTab: 0,
			moduleName: '',
			moduleSetting: {
				task: {
					type: [1, 3],
					api: '/app/exam/examTaskList',
					tabs: ['已开始', '未开始'],
					navTitle: '考试任务'
				},
				history: {
					type: [1, 2],
					api: '/app/exam/historyExam',
					tabs: ['本学期', '过往学期'],
					navTitle: '历史考试'
				}
			},
			dataSetting: {
				type: [1, 3],
				pageNo: [1, 1],
				isLastPage: [false, false],
				status: ['loadmore', 'loadmore'],
				list: [[], []]
			},
			choseNow:1,//判断是否可以进入成绩页
		};
	},
	onLoad({ moduleName }) {
		this.moduleName = moduleName;
		this.choseNow=this.moduleName=='task'?1:2
		this.init();
	},
	watch: {
		activedTab(newValue, oldValue) {
			if (this.list.length === 0 && this.status !== 'nomore') this.getList();
		}
	},
	onReachBottom() {
		!this.isLastPage && this.getList();
	},
	computed: {
		//配置项
		tabs() {
			return this.moduleSetting[this.moduleName].tabs;
		},
		navTitle() {
			return this.moduleSetting[this.moduleName].navTitle;
		},
		//接口参数
		type() {
			return this.getData(this.moduleSetting[this.moduleName].type);
		},
		pageNo: {
			get() {
				return this.getData(this.dataSetting.pageNo);
			},
			set(v) {
				this.setData(this.dataSetting.pageNo, v);
			}
		},
		apiUrl() {
			return this.moduleSetting[this.moduleName].api;
		},
		//变量
		list: {
			get() {
				return this.getData(this.dataSetting.list);
			},
			set(v) {
				this.setData(this.dataSetting.list, v);
			}
		},
		isLastPage: {
			get() {
				return this.getData(this.dataSetting.isLastPage);
			},
			set(v) {
				this.setData(this.dataSetting.isLastPage, v);
			}
		},
		status: {
			get() {
				return this.getData(this.dataSetting.status);
			},
			set(v) {
				this.setData(this.dataSetting.status, v);
			}
		}
	},
	methods: {
		init() {
			this.pageNo = 1;
			this.isLastPage = false;
			this.status = 'loadmore';
			this.list = [];
			return this.getList();
		},
		getList() {
			this.status = 'loading';
			const { type, pageNo, list } = this;
			return new Promise((resolve, reject) => {
				this.request
					.post(this.apiUrl, {
						type,
						pageNo
					})
					.then(res => {
						const { isLastPage } = res;
						this.list = this.list.concat(res.list);
						this.isLastPage = isLastPage;
						if (isLastPage) {
							this.status = 'nomore';
						} else {
							this.pageNo++;
							this.status = 'loadmore';
						}
						// this.$forceUpdate();
						resolve();
					})
					.catch(reject);
			});
		},
		setData(target, val) {
			this.$set(target, this.activedTab, val);
		},
		getData(target) {
			return target[this.activedTab];
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	.list-container {
		position: relative;
	}
}
</style>
